<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuerys">
        <a-form-item label="城市服务商" style="margin-right: 10px" v-has="'xhdjFundLog:select'">
          <serveSelect @selectClick="selectClick" :value="queryParam.agencyCode"></serveSelect>
        </a-form-item>

        <a-form-item label="当前地址" style="margin-right: 10px">
          <a-input placeholder="请输入当前地址" v-model="queryParam.address" @pressEnter="searchQuerys"></a-input>
        </a-form-item>

        <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form>
    </div>

    <div class="appointmentBox">
      <div v-for="(item, index) in appointmentLise" :key="index">
        <a-tooltip :class="colorType[item.coachStatus]" placement="topLeft" :title="'可服务时间' + item.timeStr+'--手机号:'+item.mobile">
          <div v-if="item.recommend === 0" class="timeTop">{{ item.coachName }}</div>
          <div v-if="item.recommend === 1" class="font-amount">{{ item.coachName }}</div>
          <div v-if="item.offlineNum > 0" class="font-amount">离线时间{{ item.offlineNum }}天</div>
          <div class="timeBottom">{{ item.coachStatusStr }}</div>
          <div class="timeTop">{{ item.address }}</div>
        </a-tooltip>
      </div>
    </div>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { backCoachInfoServerTimeList } from '@/api/manage.js'
import serveSelect from '@/components/serveSelect.vue'

export default {
  name: 'wydjCoachServerTime',
  components: { serveSelect },
  data () {
    return {
      description: '预约分析报表',
      queryParam: {},
      appointmentLise: [],
      colorType: {
        1: 'timeBox',
        2: 'timeBlueBox',
        3: 'timeYellowBox',
        4: 'timeRedBox'
      }
    }
  },
  methods: {
    async getBackCoachInfoServerTimeList () {
      const res = await backCoachInfoServerTimeList(this.queryParam)
      if (res.code == 200) {
        this.appointmentLise = res.result
      }
      console.log(res)
    },

    startChange (value) {
      if (value) {
        this.queryParam.startTime = value + ' 00:00:00'
      } else {
        this.queryParam.startTime = value
      }
    },

    endChange (value) {
      if (value) {
        this.queryParam.endTime = value + ' 23:59:59'
      } else {
        this.queryParam.endTime = value
      }
    },
    disabledDate (time) {
      return new Date(time).getTime() < new Date(this.queryParam.startTime).getTime()
    },
    selectClick (value) {
      this.queryParam.agencyCode = value
      //   this.searchQuery()
    },
    searchQuerys () {
      console.log('查询', this.queryParam)
      this.getBackCoachInfoServerTimeList()
    },
    searchReset () {
      this.queryParam = {}
      this.getBackCoachInfoServerTimeList()
      console.log('重置')
    }
  },
  created () {
    this.getBackCoachInfoServerTimeList()
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.ant-row {
  display: flex;
  justify-content: flex-end;
}
.ant-col {
  display: flex;
  justify-content: flex-end;
}
.ant-form {
  display: flex;
}
.appointmentBox {
  display: flex;
  flex-wrap: wrap;
}
.font-amount {
  color: #a605ef;
  font-weight: bold;
}
.timeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 130px;
  height: 100px;

  background-color: #5ec470;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}

.timeRedBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 130px;
  height: 100px;
  background-color: red;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}

.timeYellowBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 130px;
  height: 100px;
  background-color: #d74aff;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}

.timeBlueBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 130px;
  height: 100px;
  background-color: #1890ff;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}


</style>
